<template>
  <el-container style="height: 100%; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu
        active-text-color="#ffd04b"
        :unique-opened="true"
        :default-active="activeMenu"
        router
        @select="handleSelect"
      >
        <my-menu :data="menuData" />
      </el-menu>
    </el-aside>

    <el-container>
      <el-header>
        <div style="text-align: right; font-size: 12px">
          <span>{{user.userName}}</span>
        </div>
        <div id="menuTagDiv">
          <menu-tag ref="menuTag"></menu-tag>
        </div>
      </el-header>

      <el-main>
        <keep-alive :exclude="excludeName" max="10">
          <router-view />
        </keep-alive>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import MyMenu from "@/components/MyMenu.vue";
import MenuTag from "@/components/MenuTag.vue";
import { mapState } from "vuex";
export default {
  components: {
    MyMenu: MyMenu,
    MenuTag: MenuTag,
  },
  data() {
    return {
      menuData: {},
      menus: [],
      currentCom: {},
      excludeName: "",
      user: {},
    };
  },
  computed: {
    ...mapState(["activeMenu"]),
  },
  methods: {
    getMenu() {
      this.COMMON.httpPost(
        this,
        "menuOperation/getMenus",
        {},
        (result) => {
          if (result.result == "SUCCESS") {
            this.menuData = result.data.childrens;
            this.menus = new Array();
            this.getMenus(this.menuData);
            this.currentCom = MyMenu;
          } else {
          }
        },
        (result) => {}
      );
    },
    getMenus(menuData) {
      menuData.forEach((element) => {
        if (
          element.path !== null &&
          element.path !== undefined &&
          element.path !== ""
        ) {
          this.menus.push(element);
        } else {
          if (element.childrens.len !== 0) {
            this.getMenus(element.childrens);
          }
        }
      });
    },
    handleSelect(index, path) {
      console.log(index, path);
      this.menus.forEach((element) => {
        if ("/home" + element.path === index) {
          var tag = { name: element.name, index: index };
          this.$refs.menuTag.addTag(tag);
        }
      });
    },
    addtest() {
      this.excludeName = "";
    },
  },
  created: function () {
    this.getMenu();
    var user = JSON.parse(localStorage.user);
    this.user = user;
  },
};
</script>

<style>
body {
  margin: 0px;
  padding: 0;
}
#menuTagDiv {
  width: 100%;
}
</style>